<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">

	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<title>新闻详情</title>
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="css/school_news_detalis.css">
	<style>
		.introduce_container img {
			max-width: 90vw !important;
		}
	</style>
</head>

<body>
	<div id="container">
		<div class="contain">
			<div class="header">
				<div class="header_title">新闻详情</div>
				<a onclick="history.back()">
					<img src="image/return.png" alt="" class="return">
				</a>
			</div>
			<div class="news_list header-after">
				<div class="news_info" id="vue-root">
					<div class="title" v-text="news.name"></div>
					<div class="img_box" v-if="news.pic">
						<img :src="getImg(news.pic)" class="news_img">
					</div>
					<div class="img_box" v-if="news.video">
						<video :src="getImg(news.video)" class="news_img" autoplay controls playsinline
							webkit-playsinline></video>
					</div>
					<div class="introduce">
						<div class="introduce_container" v-html="news.intro"></div>
						<div class="time" v-text="format(news.time)"></div>
					</div>
				</div>
			</div>
		</div>
	</div>


	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/js/common.js"></script>

	<script>
		var app = new Vue({
			el: '#vue-root',
			data: {
				news: {}
			},
			created: function () {
				axios.get('/api/news/' + params().id).then(function (res) {
					this.news = res.data;
				}.bind(this));
			},
			methods: {
				getImg: function (pic) {
					return '/static/' + this.news.schoolId + '/news/' + pic;
				},
				format: function (time) {
					return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
				}
			}
		});

	</script>


</body>

</html>